<template>
  <view class="verification-detail-page">
    <!-- 核销详情卡片 -->
    <view class="detail-card">
      <view class="card-header">
        <text class="order-no">订单号：{{ verificationDetail.orderNo }}</text>
        <text class="status" :class="verificationDetail.statusClass">{{ verificationDetail.status }}</text>
      </view>
      
      <view class="card-content">
        <view class="info-row">
          <text class="label">预约场地：</text>
          <text class="value">{{ verificationDetail.court }}</text>
        </view>
        <view class="info-row">
          <text class="label">预约时间：</text>
          <text class="value">{{ verificationDetail.reservationTime }}</text>
        </view>
        <view class="info-row">
          <text class="label">核销时间：</text>
          <text class="value">{{ verificationDetail.verificationTime }}</text>
        </view>
        <view class="info-row">
          <text class="label">操作员：</text>
          <text class="value">{{ verificationDetail.operator }}</text>
        </view>
        <view class="info-row">
          <text class="label">位置：</text>
          <text class="value">{{ verificationDetail.location }}</text>
        </view>
        <view class="info-row">
          <text class="label">用户手机号：</text>
          <text class="value">{{ verificationDetail.userPhone }}</text>
        </view>
      </view>
    </view>
    
    <!-- 订单信息卡片 -->
    <view class="detail-card">
      <view class="card-header">
        <text class="section-title">订单信息</text>
      </view>
      
      <view class="card-content">
        <view class="info-row">
          <text class="label">下单时间：</text>
          <text class="value">{{ verificationDetail.orderTime }}</text>
        </view>
        <view class="info-row">
          <text class="label">支付方式：</text>
          <text class="value pay-method">{{ verificationDetail.paymentMethod }}</text>
        </view>
        <view class="info-row">
          <text class="label">订单金额：</text>
          <text class="value price">¥{{ verificationDetail.orderAmount }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      verificationDetail: {
        id: 1,
        orderNo: '20230928001',
        status: '已完成',
        statusClass: 'completed',
        court: 'A01号球桌',
        reservationTime: '08:00-09:00',
        verificationTime: '2023-09-28 08:05:23',
        operator: '张管理员',
        location: '一号馆入口',
        userPhone: '138****1234',
        orderTime: '2023-09-27 18:30:25',
        paymentMethod: '微信支付',
        orderAmount: '15.00'
      }
    }
  },
  onLoad(options) {
    console.log('页面加载参数:', options)
    if (options && options.id) {
      // 实际项目中这里会根据ID从服务器获取数据
      // 这里我们简单模拟一下
      const id = parseInt(options.id)
      // 可以根据ID更新verificationDetail数据
      console.log('页面参数id:', id)
      
      // 模拟根据ID获取不同数据
      const records = [
        {
          id: 1,
          orderNo: '20230928001',
          status: '已完成',
          statusClass: 'completed',
          court: 'A01号球桌',
          reservationTime: '08:00-09:00',
          verificationTime: '2023-09-28 08:05:23',
          operator: '张管理员',
          location: '一号馆入口',
          userPhone: '138****1234',
          orderTime: '2023-09-27 18:30:25',
          paymentMethod: '微信支付',
          orderAmount: '15.00'
        },
        {
          id: 2,
          orderNo: '20230928002',
          status: '已完成',
          statusClass: 'completed',
          court: 'B02号球桌',
          reservationTime: '10:00-11:00',
          verificationTime: '2023-09-28 10:02:15',
          operator: '李管理员',
          location: '二号馆入口',
          userPhone: '139****5678',
          orderTime: '2023-09-28 09:15:30',
          paymentMethod: '支付宝',
          orderAmount: '20.00'
        },
        {
          id: 3,
          orderNo: '20230927001',
          status: '已完成',
          statusClass: 'completed',
          court: 'C03号球桌',
          reservationTime: '14:00-15:00',
          verificationTime: '2023-09-27 14:03:42',
          operator: '张管理员',
          location: '三号馆入口',
          userPhone: '136****9012',
          orderTime: '2023-09-26 20:45:10',
          paymentMethod: '微信支付',
          orderAmount: '25.00'
        }
      ]
      
      // 查找匹配的记录
      const record = records.find(item => item.id === id)
      if (record) {
        this.verificationDetail = record
      }
    }
  }
}
</script>

<style scoped>
.verification-detail-page {
  min-height: 100vh;
  background-color: #e6f0ff;
  padding: 12px;
  box-sizing: border-box;
}

/* 详情卡片 */
.detail-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.order-no {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.status {
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 4px;
}

.status.completed {
  background-color: #e8f3ff;
  color: #409eff;
}

.card-content {
  /* 内容区域样式 */
}

.info-row {
  display: flex;
  margin-bottom: 12px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.label {
  color: #666;
  width: 90px;
}

.value {
  color: #333;
  flex: 1;
}

/* 支付方式绿色 */
.pay-method {
  color: #00b42a;
}

/* 价格红色 */
.price {
  color: #ff4d4f;
  font-weight: 500;
}
</style>